<template>
  <div class="left-preview-container">
    <je-panel v-bind="leftConfig">
      <template #tbar>
        <div class="left-title">
          <div><i class="fal fa-ballot-check"></i>列表效果预览</div>
          <div style="cursor: pointer" @click="getFuncData()"
            ><i class="jeicon jeicon-refresh"></i>刷新</div
          >
        </div>
      </template>
      <template #default>
        <je-panel v-bind="previewContainerConfig">
          <!-- <template #top>
            <div class="preview-title">{{ funcName }}</div>
          </template>
          <template #tbar>
            <div class="preview-search">
              <je-search
                placeholder="请输入关键字搜索"
                style="width: 310px; border-radius: 10px"
              ></je-search>
              <i class="fal fa-list-check"></i>
            </div>
          </template> -->
          <template #default>
            <div class="data-content">
              <div v-for="item in funcData" :key="item" v-html="item.NEW_TEMPLETE_FFT"> </div>
              <div v-if="funcData.length <= 0 || !code" class="no-preview-data">暂无数据</div>
            </div>
          </template>
        </je-panel>
      </template>
    </je-panel>
  </div>
</template>

<script>
  import { reactive, watch, toRefs, defineComponent, onMounted, onBeforeMount } from 'vue';
  import { Panel } from '@jecloud/ui';
  import { getData } from '@/api/index';
  import { useFuncStore } from '@/store/func-store';
  import { execScript } from '@jecloud/utils';

  export default defineComponent({
    name: 'FormFieldConfig',
    components: { JePanel: Panel },
    props: {
      funcId: String,
      data: Object,
      recordData: Object,
    },
    emits: [],
    setup(props) {
      const funcStore = useFuncStore();
      const state = reactive({
        leftConfig: {
          tbar: {
            size: 40,
            style: { 'line-height': '40px' },
          },
        },
        data: {},
        funcData: [],
        previewContainerConfig: {
          top: { size: 40, style: { 'line-height': '40px' } },
          tbar: {
            size: 40,
            style: { 'padding-bottom': '12px' },
          },
        },
        code: '',
        funcName: props.recordData.FUNCINFO_FUNCNAME,
      });
      const methods = {
        getFuncData() {
          state.funcData = [];
          const { FUNCINFO_TABLENAME, FUNCINFO_FUNCCODE } = props.recordData;
          const params = {
            tableCode: FUNCINFO_TABLENAME,
            funcCode: FUNCINFO_FUNCCODE,
            // tableCode: 'JE_META_APPS_LIST_TEMPLETE',
            // funcCode: 'JE_META_APPS_LIST_TEMPLETE',
          };
          getData(params, funcStore.product.code).then((res) => {
            if (res.length <= 0) {
              return;
            }
            res.map((item) => {
              const data1 = execScript(state.data.TEMPLETE_FFT, {
                EventOptions: { row: item },
                JE,
              });
              item.NEW_TEMPLETE_FFT = data1;
            });
            state.code = execScript(state.data.TEMPLETE_FFT, {
              EventOptions: { row: [] },
              JE,
            });
            state.funcData = res;
          });
        },
      };

      onMounted(() => {
        // methods.getFuncData();
      });

      watch(
        () => props.data,
        () => {
          state.data = props.data;
          methods.getFuncData();
        },
        { deep: true },
      );
      return { ...methods, ...toRefs(state) };
    },
  });
</script>
<style lang="less">
  .mobile-list-config-container {
    .je-modal--content {
      white-space: inherit !important;
    }
  }
</style>
<style lang="less" scoped>
  .left-preview-container {
    width: 100%;
    height: 100%;
    .no-preview-data {
      display: flex;
      align-items: center;
      height: 100%;
      justify-content: center;
      font-size: 18px;
    }
    .left-title {
      border-bottom: 1px solid #e6e6e6;
      padding: 0 10px;
      align-items: center;
      display: flex;
      justify-content: space-between;
      i {
        margin-right: 4px;
      }
    }
    .preview-title {
      text-align: center;
    }
    .preview-search {
      padding: 0 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      i {
        font-size: 20px;
      }
    }
    .data-content {
      overflow-y: scroll;
      background: #f2f2f2;
      padding-top: 10px;
      &::-webkit-scrollbar {
        width: 0px !important;
      }
    }
  }
</style>
